<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加雇员</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-form :model="employeetable" :rules="addVerify" ref="empForm" label-position="right"
             label-width="80px" style="width: 78%;margin-top: 100px;padding-left: 62px">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="雇员编号" prop="employeenumber">
                    <el-input v-model="employeetable.employeenumber" autocomplete="off"
                              placeholder="请输入雇员编号"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="雇员名称" prop="employeename">
                    <el-input v-model="employeetable.employeename" autocomplete="off"
                              placeholder="请输入雇员名称"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="部门" prop="departmenttableId">
                    <el-select v-model="employeetable.departmenttableId" clearable style="width: 395px;"
                               placeholder="请选择部门">
                        <el-option
                                v-for="item in departmenttables"
                                :key="item.id"
                                :label="item.departmentType"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系电话" prop="telephone">
                    <el-input v-model="employeetable.telephone" autocomplete="off"
                              placeholder="请输入联系电话"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="性别" prop="sex">
                    <el-radio v-model="employeetable.sex" label="M">男</el-radio>
                    <el-radio v-model="employeetable.sex" label="F">女</el-radio>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="职务" prop="duty">
                    <el-select v-model="employeetable.duty" clearable style="width: 395px;"
                               placeholder="请选择">
                        <el-option
                                v-for="item in employeetableDuty"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="生日" prop="birthday">
                    <el-date-picker
                            v-model="employeetable.birthday"
                            type="date"
                            style="width: 395px;"
                            placeholder="选择日期"
                            :picker-options="pickerOptions"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="家庭住址" prop="address">
                    <el-input v-model="employeetable.address" autocomplete="off"
                              placeholder="请输入家庭住址"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="职称" prop="posttitle">
                    <el-input v-model="employeetable.posttitle" autocomplete="off"
                              placeholder="请输入职称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="薪水" prop="salary">
                    <el-input v-model.number="employeetable.salary" autocomplete="off"
                              placeholder="请输入薪水" style="width: 358px;"></el-input>￥/月
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-form-item label="备注">
                    <el-input
                            type="textarea"
                            autosize
                            maxlength="150"
                            show-word-limit
                            placeholder="请输入备注"
                            v-model="employeetable.remark">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-button type="primary" @click="commitEmp">保存</el-button>
</div>
<script>
    let vm = new Vue({
        el:"#app",
        data(){
            var clientNameRules = (rule, value, callback) => {
                if (value === '') {
                    vm.employeetable.employeenumber = vm.generateRandomValue();
                    callback(new Error("请输入雇员编号，已自动生成"));
                } else {
                    if (value.length < 2 || value.length > 20) {
                        vm.employeetable.employeenumber = vm.generateRandomValue();
                        callback(new Error("长度在 3 到 20 个字符，已自动生成"));
                    }else {
                        selectAjax("get","/employeetable/ifEmpNumberExist/"+value,null,(data)=>{
                            if (data.code == 500) {
                                // callback(new Error(data.msg));
                                vm.employeetable.employeenumber = vm.generateRandomValue();
                                callback(new Error("雇员编号已存在，已自动生成"));
                            }else{
                                callback();
                            }
                        })
                    }
                }
            };
            return {
                employeetable: {
                    employeenumber: '',//雇员编号
                    employeename: '',//雇员姓名
                    sex: '',//性别
                    birthday: '',//出生日期
                    address: '',//家庭地址
                    telephone: '',//电话
                    duty: '',//职务
                    posttitle: '',//职称
                    salary: '',//薪水
                    departmenttableId: '',//部门
                    employer: '',//雇佣者
                    employedtime: '',//被雇用时间
                    empinfomodifier: '',//修改雇员信息的人
                    modifytime: '',//修改时间
                    remark: '',//备注
                },
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e7;
                    }
                },
                departmenttables: [],
                employeetableDuty: [
                    {value: "经理管理员", label: "经理管理员"},
                    {value: "系统管理员", label: "系统管理员"},
                    {value: "仓库管理员", label: "仓库管理员"},
                    {value: "销售管理员", label: "销售管理员"},
                    {value: "用户管理员", label: "用户管理员"},
                ],
                addVerify: {
                    employeenumber:[
                        {required: true,validator:clientNameRules, trigger: 'blur'}
                    ],
                    employeename: [
                        {required: true, message: '请输入员工姓名', trigger: 'blur'},
                        {min: 2, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    telephone: [
                        {required: true, message: '请输入电话', trigger: 'blur'},
                        {pattern:/^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入家庭地址', trigger: 'blur'},
                    ],
                    posttitle: [
                        {required: true, message: '请输入职称', trigger: 'blur'},
                    ],
                    departmenttableId:[
                        { required: true, message: '请选择部门', trigger: 'change' }
                    ],
                    salary: [
                        {required: true, message: '请输入工资', trigger: 'blur'},
                        {type: 'number', message: '请输入数字', trigger: 'blur'},
                    ],
                    sex:[{required: true, message: '请选择性别', trigger: 'change'}],
                    birthday:[{ required: true, message: '请选择出生日期', trigger: 'change' }],
                    address:[{required: true, message: '请输入家庭住址', trigger: 'blur'}],
                    duty:[
                        { required: true, message: '请选择职务', trigger: 'change' }
                    ],
                    posttitle:[{required: true, message: '请输入职称 如：张经理', trigger: 'blur'}],
                },
            }

        },
        methods: {
            commitEmp(){
                let _this = this;
              this.$refs['empForm'].validate((val) => {
                  if (val) {
                      addOrUpdateAjax("post","/employeetable/add",this.employeetable,function (data) {
                          if (data.code == 200) {
                              _this.$message({
                                  message: data.msg,
                                  type: 'success'
                              });
                              _this.$refs['empForm'].resetFields();
                              _this.employeetable.departmenttableId = '';
                              _this.employeetable.sex = '';
                              _this.employeetable.duty = '';
                              _this.employeetable.remark = '';
                              let empNumber = _this.generateRandomValue();
                              _this.employeetable.employeenumber = empNumber;
                          }else {
                              _this.$message.error(data.msg);
                          }
                      })
                  }
              })
            },
            myDepartmenttableInit() {//初始化类别
                let _this = this;
                selectAjax("get", "/departmenttable/getAll", {}, function (data) {
                    _this.departmenttables = data.data;
                })
            },
            generateRandomValue() {
                let data = '';
                let randomNumber;
                let randomChar;
                var randomNum = Math.floor(Math.random() * (10 - 5 + 1)) + 5;
                // console.log("for ====i===>"+randomNum)
                const randomString = 'abcdefghijklmnopqrstuvwxyz'; // 定义一个字符串作为字符来源
                for (let i = 0; i < randomNum; i++) {
                    if (i%2 == 0){
                         randomNumber = Math.floor(Math.random() * 10); // 生成一个0到9之间的随机整数
                        randomChar = randomString[Math.floor(Math.random() * randomString.length)];
                        data += randomNumber + randomChar
                    }else {
                        randomChar = randomString[Math.floor(Math.random() * randomString.length)];
                        data += randomChar
                    }
                }
                // console.log(data)
                // this.employeetable.employeenumber = data
                // this.ifEmployeetableNumber(data)
                return data; // 将数字和字符转换为字符串并连接
            },
        },
        mounted(){
            this.myDepartmenttableInit();
            let empNumber = this.generateRandomValue();
            this.employeetable.employeenumber = empNumber;
            this.employeetable.employer = localStorage.getItem("username");
            this.employeetable.employedtime = new Date();
            // const h = this.$createElement;
            this.$notify({
                type: 'warning',
                dangerouslyUseHTMLString: true,
                message: '所有带*的必填<br>雇员编号默认是随机生成的,<span style="color:red;">请谨慎填写</span>'
            });
        }
    })
</script>
</body>
</html>